<template>
  <div v-if="pokemon">
    <!-- 宝可梦信息卡片 -->
    <pokemon-card :pokemon="pokemon" :getColorByType="getColorByType" :getPokemonIndex="getPokemonIndex"/>

    <!-- 宝可梦种族值信息卡片 -->
    <h2><span class="pokemon-icon">&#xe853; </span>种族值</h2>
    <pokemon-base-value :pokemon="pokemon" :class="getColorByType(isLabel=true)"/>

    <!-- 宝可梦属性相性 -->
    <h2><span class="pokemon-icon">&#xe853; </span>属性相性</h2>
    <type-relation-card :pokemon="pokemon" :getColorByType="getColorByType"/>

    <!-- 宝可梦技能信息 -->
    <h2><span class="pokemon-icon">&#xe853; </span>可学会招式表</h2>
    <pokemon-skill :pokemon="pokemon" :getColorBySkillType="getColorBySkillType"
    :getColorByType="getColorByType" :class="getColorByType(isLabel=true)"/>
    <h2><span class="pokemon-icon">&#xe853; </span>可使用的招式学习器</h2>
    <machine-skill :pokemon="pokemon" :getColorBySkillType="getColorBySkillType"
    :getColorByType="getColorByType" :class="getColorByType(isLabel=true)"/>
    <h2><span class="pokemon-icon">&#xe853; </span>蛋招式</h2>
    <breeding-skill :pokemon="pokemon" :getColorBySkillType="getColorBySkillType"
    :getColorByType="getColorByType" :class="getColorByType(isLabel=true)"/>
  </div>
</template>

<script>
import BreedingSkill from './BreedingSkill.vue';
import MachineSkill from './MachineSkill.vue';
import PokemonBaseValue from './PokemonBaseValue.vue';
import PokemonCard from './PokemonCard.vue';
import PokemonCardLabel from './PokemonCardLabel.vue';
import PokemonSkill from './PokemonSkill.vue';
import TypeRelationCard from './TypeRelationCard.vue';

export default {
    components: { 
        PokemonCardLabel,
        PokemonCard,
        PokemonBaseValue,
        PokemonSkill,
        MachineSkill,
        TypeRelationCard,
        BreedingSkill,
    },
    name: 'PokemonPage',
    props: ['pokemon'],
    methods:{
        /* 根据该宝可梦的属性1获取背景样式 */
        getColorByType(isLabel = false, type = this.pokemon?.type1){
            if(!type)
                return;

            switch(type){
            case '草':
                if(!isLabel)
                    return "bg-grass";
                else
                    return "bgl-grass";
            case '火':
                if(!isLabel)
                    return "bg-fire";
                else
                    return "bgl-fire";
            case '毒':
                if(!isLabel)
                    return "bg-poison";
                else
                    return "bgl-poison";
            case '水':
                if(!isLabel)
                    return "bg-water";
                else
                    return "bgl-water";
            case '飞行':
                if(!isLabel)
                    return "bg-fly";
                else
                    return "bgl-fly";
            case '地面':
                if(!isLabel)
                    return "bg-ground";
                else
                    return "bgl-ground";
            case '幽灵':
                if(!isLabel)
                    return "bg-ghost";
                else
                    return "bgl-ghost";
            case '格斗':
                if(!isLabel)
                    return "bg-fighting";
                else
                    return "bgl-fighting";
            case '钢':
                if(!isLabel)
                    return "bg-steel";
                else
                    return "bgl-steel";
            case '超能力':
                if(!isLabel)
                    return "bg-psychic";
                else
                    return "bgl-psychic";
            case '岩石':
                if(!isLabel)
                    return "bg-stone";
                else
                    return "bgl-stone";
            case '冰':
                if(!isLabel)
                    return "bg-ice";
                else
                    return "bgl-ice";
            case '妖精':
                if(!isLabel)
                    return "bg-fairy";
                else
                    return "bgl-fairy";
            case '一般':
                if(!isLabel)
                    return "bg-common";
                else
                    return "bgl-common";
            case '电':
                if(!isLabel)
                    return "bg-electric";
                else
                    return "bgl-electric";
            case '龙':
                if(!isLabel)
                    return "bg-dragon";
                else
                    return "bgl-dragon";
            case '恶':
                if(!isLabel)
                    return "bg-dark";
                else
                    return "bgl-dark";
            case '虫':
                if(!isLabel)
                    return "bg-bug";
                else
                    return "bgl-bug";
            }
        },
        /* 根据该招式的类型获取背景样式 */
        getColorBySkillType(type){
            if(!type)
                return;

            switch(type){
            case '物理':
                return "bg-physics";
            case '特殊':
                return "bg-change";
            case '变化':
                return "bg-special";
            }
        },

        /* 根据该宝可梦的属性1获取label背景样式 */
        /* getLcolorByType(type = this.pokemon?.type1){
            if(!type)
                return;

            switch(type){
            case '草':
                return "bgl-grass";
            case '火':
                return "bgl-fire";
            case '毒':
                return "bgl-poison";
            }
        }, */

        getPokemonIndex(){
            if(!this.pokemon?.index)
                return;

            if(this.pokemon.index <= 9){
                return `#000${this.pokemon.index}`
            }else if (this.pokemon.index <= 99){
                return `#00${this.pokemon.index}`
            }else if (this.pokemon.index <= 999){
                return `#0${this.pokemon.index}`
            }else if (this.pokemon.index <= 9999){
                return `#${this.pokemon.index}`
            }
        }
    }
}
</script>

<style lang="less" scoped>

.card-container {
    width: 500px;
    min-width: 320px;
}

table{
    width: 100%;
}

.table-fixed {
    table-layout: fixed;
}

.pokemon-img {
    width: 100%;
}

@media screen and (max-width: 600px) {
    .card-container {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
}
</style>